<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="css/submit.css">
</head>
<body>
	<header>
		<div class="header-con">
			<p class="logo">
				<img src="img/first/logo-new.png" alt="">
			</p>
			<ul>
				<li>在线客服<i class="icon icon-server"></i></li>
				<li>400-999-5999 <span>[仅支持中文]</span></li>
				<li>9:00-22:00</li>
			</ul>
		</div>
	</header>
	<article>
		<div class="left">
			<h3>配送地址</h3>
			<div class="xinxi">
				<div class="xinxi-top">
					<div class="shouname">
						<p>收货人</p>
						<input type="text">
					</div>
					<div class="phone">
						<p>手机号码</p>
						<input type="text">
					</div>
				</div>
				<div class="prive">
					<select name="" id="province"></select>
					<select name="" id="city"></select>
    				<select name="" id="area"></select>

				</div>
				<div class="xinxi-xiangxi">
					<input type="text" placeholder="请填写详细收货地址，例如街道名称、门牌号码等信息">
				</div>
				<div class="youzheng">
					<p>邮政编码</p>
					<input type="text">
				</div>
				<div class="moren">
					<input type="checkbox">
					<p>设为默认地址</p>
				</div>
				<div class="click">
					<p class="remove">返回</p>
					<p class="true">使用该地址</p>
				</div>
			</div>
			<div class="other">
				<h3>配送方式</h3>
				<div class="other-text">
					<i></i>
					<span>普通达:预计48小时发货，除特别通知外</span>
				</div>
				<h3>支付方式</h3>
				<ul>
					<li><i></i>
						<img src="img/first/icon_alipay.png" alt="">
					</li>
					<li><i></i>
						<img src="img/first/icon_wechat.png" alt="" class="wei">
					</li>
				</ul>
				<div class="tongyi">
					<input type="checkbox">
					<span> 我接受adidas商城使用条款和隐私声明</span>
				</div>
				<div class="xiadan">
					确认下单
				</div>
			</div>			
		</div>
		<div class="right">
			<h4>订单摘要</h4>
			<div class="right-con">
				<div class="product" id="template">
					<img src="" alt="">
					<div class="pro">
						<p class="title">
						</p>
						<p class="color"><span>颜色: </span><span class="color-one"></span></p>
						<p class="size-da"><span>尺码: </span><span class="size"></span></p>
					</div>
				</div>
				<div class="price-con">
					<p>￥0</p>
				</div>
				<div class="xiaoji">
					<p>
						<span>商品金额</span>
						<span class="price">￥0</span>
					</p>
					<p>
						<span>优惠金额</span>
						<span class="you">-0.00</span>
					</p>
					<p>
						<span>运费</span>
						<span class="yun">免运费</span>
					</p>
				</div>
				<p class="zong">
					<span>商品总计</span>
					<span class="price">￥0</span>
				</p>
				<p class="jifeng">
					<span>预计生成积分</span>
					<span class="price">0</span>
				</p>
			</div>
		</div>
	</article>

	<div class="true-money">
		<p>是否付款</p>
		<button class="que">确定</button>
		<button class="qu">取消</button>
	</div>

	<div class="deng">
		<p>付款成功</p>
	</div>
	<div class="shi">
		<p>付款失败</p>
	</div>

	<footer>
		<div class="footer-bot">
			<div class="footer-bot-con">
				<p class="p1">
					<span class="icon icon-china"></span>
					<span>中国</span>
					<span>隐私声明</span>
					<span>使用条款</span>
					<span>网站地图</span>
					<span>&copy;阿迪达斯体育(中国)有限公司保留所有权利</span>
				</p>
				<p class="p2">
					<span>苏ICP备14048805号-1</span><span class="icon icon-hui"></span><span>&copy;2019adidas江苏工商</span><span class="icon icon-hui"></span><span>苏公安网安备32059002001401号</span>
				</p>
			</div>
		</div>			
	</footer>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/citys.js"></script>
<script>
	//省市区三级联动
	let province = document.getElementById("province");
    let city = document.getElementById("city");
    // 初始化省份
    cities.forEach(item=>{
        let provinceName = item.provinceName;
        let option = document.createElement("option")
        option.innerHTML = provinceName;
        province.appendChild(option);
    })
    // 根据数组生成城市节点
    function createCity(cityData){
        // 清空已有数据
        let city = document.getElementById("city");
        city.innerHTML = "";
        // 根据形参生成option节点插入到城市select标签中
        cityData.forEach(item=>{
            let cityName = item.cityName;
            let option = document.createElement("option")
            option.innerHTML = cityName;
            city.appendChild(option);
        })
    }
    // 根据数组生成区节点
    function createArea(areaData){
        let area = document.getElementById("area");
        area.innerHTML = "";
        areaData.forEach(item=>{
            let option = document.createElement("option")
            option.innerHTML = item.areaName;
            area.appendChild(option)
        })
    }

    // 初始化城市
    let cityList = cities[0].mallCityList;
    createCity(cityList)

    // 初始化区
    let areaList = cityList[0].mallAreaList;
    createArea(areaList)



    province.onchange = function(){
        // selectedIndex是下拉选择菜单元素独有的一个属性
        // 返回当前选中的option标签相对于其他option的下标
        var cityList = cities[this.selectedIndex].mallCityList;
        createCity(cityList)
        createArea(cityList[0].mallAreaList)
    }

    city.onchange = function(){
        let areaList = cities[province.selectedIndex].mallCityList[this.selectedIndex].mallAreaList;
        createArea(areaList)
    }


	$(".xiadan").click(function(){
		let name = $(".shouname input").val();
		let phone = $(".phone input").val();
		let address = $("#province").val() + $("#city").val() + $("#area").val() + $(".xinxi-xiangxi input").val();
		let code = $(".youzheng input").val();
		let date = new Date();
		let dat = date .toLocaleString();
		if(name==="" && phone==="" && address === "" && code ===""){
			alert("请输入您的详细信息");
			return;
		}
		if($(".tongyi input").prop("checked")){
			$(".true-money").css("display","block");
			$(".que").click(function(){
				if(sessionStorage.getItem("state") === "true"){
					sessionStorage.setItem("shifou","shi");
				}
				else{
					let orderKu = JSON.parse(sessionStorage.getItem("mation"));
					$.ajax({
						url:"http://10.35.164.241:8080/orderItem",
						data:{
							username:sessionStorage.getItem("showusername"),
							listId:orderKu.listId,
							name:name,
							phone:phone,
							address:address,
							code:code,
							title:orderKu.title,
							color:orderKu.color,
							size:orderKu.size,
							price:orderKu.price,
							state:"true",
							img:orderKu.src,
							data:dat,
						},
						success:function(data){
							if (data === "success") {
								
							}
						}
					})
				}
				$(function(){
					$(".true-money").css("display","none");
					$(".deng").css("display","block");
					setTimeout(function(){
						location.href = "http://10.35.164.241:8080/index.html"
					},3000)
				})
			})

			$(".qu").click(function(){
				if(sessionStorage.getItem("state") === "true"){
					sessionStorage.setItem("shifou","fou");
					$(function(){
						$(".true-money").css("display","none");
						$(".shi").css("display","block");
						setTimeout(function(){
							location.href = "http://10.35.164.241:8080/index.html"
						},3000)
					})
				}
				else{
					let orderKu = JSON.parse(sessionStorage.getItem("mation"));
					$.ajax({
						url:"http://10.35.164.241:8080/orderItem",
						data:{
							username:sessionStorage.getItem("showusername"),
							listId:orderKu.listId,
							name:name,
							phone:phone,
							address:address,
							code:code,
							title:orderKu.title,
							color:orderKu.color,
							size:orderKu.size,
							price:orderKu.price,
							state:"false",
							img:orderKu.src,
							data:dat,
						},
						success:function(data){
							if (data === "success") {
								
							}
						}
					})

					$(function(){
						$(".true-money").css("display","none");
						$(".shi").css("display","block");
						setTimeout(function(){
							location.href = "http://10.35.164.241:8080/index.html"
						},3000)
					})
				}
			})
			
		}
		else{
			alert("请接受使用条款和隐私声明");
		}
	})
	if(sessionStorage.getItem("state") === "true"){
		let priceC = 0;
		let carku = JSON.parse(localStorage.getItem("carmation"));
		carku.forEach(function(item){
			let newItem = $("#template").clone(true);
			newItem.find("img").attr("src",item.src);
			newItem.find(".title").html(item.title);
			newItem.find(".color-one").html(item.color);
			newItem.find(".size").html(item.size);
			newItem.attr("id","");
			newItem.prependTo(".right-con");
			let priceZ = item.price;
			priceC = priceC + Number(priceZ.replace("￥",""));
			$(".price-con p").html("￥"+priceC);
			$(".price").html("￥"+priceC);
			$(".jifeng .price").html(priceC);
		})
	}
	else{
		let submation = JSON.parse(sessionStorage.getItem("mation"));
		$("#template").css("display","block");
		$("#template img").css("float","left");
		$(".product img")[0].setAttribute("src",submation.src);
		$(".title")[0].innerHTML = submation.title;
		$(".color-one")[0].innerHTML = submation.color;
		$(".size")[0].innerHTML = submation.size;
		$(".price-con p")[0].innerHTML = submation.price
		$(".price")[0].innerHTML = submation.price;
		let price = submation.price;
		$(".jifeng .price")[0].innerHTML = price.replace("￥","");
	}
	

	$(".remove").click(function(){
		window.history.go(-1);
	})

</script>
</html>